<template>
  <div class="score-card">
    <!-- 评分卡项目 -->
    <ScoreCardItem
      title="评分计数"
      tooltip-content="评分相关说明"
      :score="20"
      :items="[
        { label: '评分计数总数', value: '100' },
        { label: '评分计数产生数', value: '10' },
        { label: '人均评分计数', value: '10' }
      ]"
    />

    <ScoreCardItem
      title="评分记录"
      tooltip-content="记录相关说明"
      :score="20"
      :items="[
        { label: '评分记录总数', value: '100' },
        { label: '产品评分总数', value: '20' }
      ]"
    />

    <!-- 评分进度 -->
    <ScoreProgress
      :total-score="45"
      :progress-items="[
        { label: '上级区域', score: 85, color: 'bg-red-500' },
        { label: '本级区域', score: 50, color: 'bg-yellow-500' },
        { label: '下级区域', score: 40, color: 'bg-blue-500' }
      ]"
    />
  </div>
</template>

<script setup>
import ScoreCardItem from './ScoreCardItem.vue';
import ScoreProgress from './ScoreProgress.vue';
</script> 